<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>会员卡</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="css/finance.css">
	</head>

	<body>
		<div id="uniocn" class="layui-layout layui-layout-admin">

			<div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
				<button class="layui-btn layui-btn-ms">商户列表</button>
			</div>
			<div class="applyList">
				<form action="##" class="layui-form">
					<div style="display: flex;justify-content: space-between;">
						<div class="layui-form-item">
							<div class="layui-input-inline">
								<select name="" id="">
									<option value="">关键字类型</option>
									<option value="">临</option>
									<option value="">兵</option>
									<option value="">斗</option>
									<option value="">者</option>
									<option value="">皆</option>
									<option value="">阵</option>
									<option value="">列</option>
									<option value="">在</option>
									<option value="">前</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block" style="display: flex;">
								<input class="layui-input" type="text" placeholder="请输入关键字">
								<button class="layui-btn layui-btn-primary ">搜索</button>
								<button class="layui-btn layui-btn-primary">导出</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div style="box-sizing: border-box;padding: 15px;background: #fff;margin-top: 15px">
				<table class="layui-table">
					<colgroup>
						<col width="15%">
						<col width="10%">
						<col width="10%">
						<col width="10%">
						<col width="10%">
						<col width="10%">
						<col width="10%">
					</colgroup>
					<tr>
						<th>持卡人信息</th>
						<th>用户电话</th>
						<th>开通时间</th>
						<th>用户状态</th>
						<th>用户等级</th>
						<th>失效时间</th>
						<th>操作</th>
					</tr>
					<tr v-for="(item,index) in list">
						<td>
							<div>
								<img class="list-userImg" :src="item.img" alt="">-
								<span>{{item.user}}</span>
							</div>
						</td>
						<td>
							<span>{{item.phone}}</span>
						</td>
						<td>
							<span>{{item.startTime}}</span>
						</td>
						<td>
							<button class="layui-btn layui-btn-sm">使用中</button>
						</td>
						<td>
							<span>{{item.manage}}</span>
						</td>
						<td>
							<span>{{item.endTime}}</span>
						</td>
						<td>
							<div class="operation">
								<a href="javascript:;">编辑</a>
								<a href="javascript:;">禁用</a>
								<a href="javascript:;" @click="del(index)">删除</a>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script src="layui/layui.js"></script>
	<script src="js/vue2.5.16.js"></script>
	<script src="js/public.js"></script>
	<script src="js/data.js"></script>
	<script>
		layui.use(['form', 'layer'], function() {
			var form = layui.form;
			var layer = layui.layer;
		});
		new Vue({
			el: "#uniocn",
			data: {
				list: [{
					img: "./images/userImg.png",
					user: "熊猫生活",
					phone: "19633332222",
					startTime: "2018-08-15 12:00:00",
					endTime: "2018-08-15 12:00:00",
					states: true,
					manage: "默认等级",
				}, {
					img: "./images/userImg.png",
					user: "熊猫生活",
					phone: "19633332222",
					startTime: "2018-08-15 12:00:00",
					endTime: "2018-08-15 12:00:00",
					states: true,
					manage: "默认等级",
				}, {
					img: "./images/userImg.png",
					user: "熊猫生活",
					phone: "19633332222",
					startTime: "2018-08-15 12:00:00",
					endTime: "2018-08-15 12:00:00",
					states: true,
					manage: "默认等级",
				}, ]
			},
			methods: {
				del: function(index) {
					var that = this;
					layer.confirm('确认删除吗？', {
						btn: ['确认', '取消']
					}, function() {
						that.list.splice(index, 1)
						layer.msg('删除成功', {
							icon: 1
						})
					}, function() {
						layer.msg('删除取消')
					})
				}
			}
		})
	</script>

</html>